<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios</title>
</head>

<body>
  <div id="root">
    <ul>
      <li v-for="item in movies" :key="item.id">
        {{ item.showInfo }}
      </li>
    </ul>
  </div>

  <script src="./js/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.js"></script>
  <script>
    new Vue({
      el: '#root',
      data: {
        // 电影列表数据
        movies: []
      },
      mounted() {
        // 网络请求地址
        // 地址栏显示传参
        // const url = 'http://127.0.0.1:5500/data/db.json?id=1'


        // 发起get请求
        // axios().get/put/post/delete
        //  axios({url,method.data,prams:{}})
        /*  axios.get(url).then(ret=>{
           console.log(ret)
         }) */
        // console.log(await axios.get(url))

        // 使用对象中隐式传参  其结果都是get传参 通过地址栏
        const url = 'http://127.0.0.1:5500/data/db.json'
        // 需要get传入一个id=1的参数
        axios.get(url, {
          params: {
            id: 12345,
            name:'aaa'
          }
        })
        // 如果参数过多，建议用对象的方式来传递，这样日后好去维护


      }
    })
  </script>
</body>

</html>